<template>
    <div class="tmpl">
        <nav-bar :title='title' />
        <div class="news-title">
            <p>{{NewsDetails.title}}</p>
            <div class="news-title-bottom">
                <span>{{NewsDetails.click}}次点击</span>
                <span>分类：民生经济</span>
                <span>添加时间：{{NewsDetails.add_time | convertTime('YYYY-MM-DD')}}</span>
            </div>
        </div>
        <div class="news-content" v-html='NewsDetails.content'></div>
    </div>
</template>
<script>
    export default {
        name: 'news-details',
        data () {
            return {
                title: '',
                NewsDetails: ''
            }
        },
        created () {
            let id = this.$route.query.id;
            this.$axios.get(process.env.API_HOST + 'getnew/' + id)
            .then( res => {
                this.NewsDetails = res.data.message[0];
                console.log(this.NewsDetails);
            })
            .catch( err => console.log(err))
        },
        beforeRouteEnter (to,from,next){
            let title = '';
            if(to.name === 'imagetext.details'){
                title = '图文介绍'
            }else if(to.name === 'news.details'){
                title = '新闻详情'
            }
            console.log(to);
            console.log(from);
            next(vm => {
                vm.title = title;
            });
        }
    }
</script>
<style scoped="">
    .news-title{
        width: 100%;
        padding: 0 10px;
    }
    .news-title p{
        font-size: 18px;
        padding-top: 10px;
        color: blue;
    }
    .news-title-bottom{
        width: 100%;
        padding: 5px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
    }
    .news-title-bottom span{
        font-size: 12px;
        color: #000;
    }
    .news-content{
        padding: 10px 10px 60px;
    }
    .news-content >>> img{
        width: 100%;
    }
</style>
